<template>

  <div class="filter-container">

    <el-row>

      <el-col span="3">
        <el-form-item label="权限名称">
          <el-input  placeholder="请输入权限名称" v-model="state.pagination.authorityName"  clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="权限功能">
          <el-input  placeholder="请输入权限功能" v-model="state.pagination.features" clearable />
        </el-form-item>
      </el-col>

      <el-col span="3">
        <el-button @click="load" >查询</el-button>
        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
      </el-col>
    </el-row>


  </div>

  <el-table :data="state.dataList"  style="width: 100%" >

    <el-table-column label="ID" align="center" prop="id"></el-table-column>
    <el-table-column label="权限名称" align="center" prop="authorityName"></el-table-column>
    <el-table-column label="权限功能" align="center" prop="features"></el-table-column>
    <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
    <el-table-column label="最后修改时间" align="center" prop="lastTime"></el-table-column>

    <el-table-column label="操作" align="center" fixed="right" width="180" >
      <template v-slot="{row}">
        <el-button link type="primary" size="small" @click="handleEidt(row)">修改</el-button>
        <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>

  <!-- 分页 -->
  <div class="pagination-container">
    <el-pagination
        class="pagiantion"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="state.pagination.currentPage"
        :page-size="state.pagination.pageSize"
        :page-sizes="[1, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.pagination.total">
    </el-pagination>
  </div>



  <!-- 新增权限弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible"
      title="新增权限"
      width="30%"
  >
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
            <el-form :model="state.formData" label-position="top" :rules="rules" ref="ruleFormRef">
    <el-row>
        <el-col span="3">
        <el-form-item label="权限名称" prop="authorityName">
          <el-input  placeholder="请输入权限名称" v-model="state.formData.authorityName"  clearable />
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="权限功能" prop="features">
          <el-input  placeholder="请输入权限功能" v-model="state.formData.features"  clearable />
        </el-form-item>
      </el-col>


    </el-row>
            </el-form>
  </div>

          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleAdd">
            确定
          </el-button>
        </span>
    </template>
  </el-dialog>

  <!--修改权限弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible4Edit"
      title="修改权限"
      width="30%"
  >
    <!--    <span>新增账单</span>-->
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
<el-form :model="state.formData" label-position="top" :rules="rules" ref="ruleFormRef">
    <el-row>
        <el-col span="3">
        <el-form-item  label="权限名称" prop="authorityName">
          <el-input  placeholder="请输入权限名称" v-model="state.formData.authorityName" clearable />
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item  label="权限功能" prop="features">
          <el-input  placeholder="请输入权限功能" v-model="state.formData.features"  clearable />
        </el-form-item>
      </el-col>

    </el-row>
</el-form>
  </div>

          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleUpdate">
            确定
          </el-button>
        </span>
    </template>
  </el-dialog>

</template>


<script setup>
import {reactive,ref} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import instance from "../../../request";
const state=reactive({
  dataList: [],//表格数据
  options:[],
  selectedOptions: [],
  formData: {
    authorityName: "",
    features: ""
  },
  dialogFormVisible: false,//添加表单是否可见
  dialogFormVisible4Edit:false,//编辑表单是否可见
  /*rules: {//校验规则
    type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
    name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
  },*/
  pagination: {//分页相关模型数据
    currentPage: 1,//当前页码
    pageSize:5,//每页显示的记录数
    total:0,//总记录数
    authorityName: "",
    features: ""
  },
})

const rules = reactive({
  authorityName: [
    {required: true,message:"请输入权限名称",trigger: "blur"},
  ],
  features: [
    {required: true,message:"请输入权限功能",trigger: "blur"},
  ]
})

//分页条件查询
const load=()=>{
  let param ="?authorityName="+state.pagination.authorityName;
  param +="&features="+state.pagination.features;
  instance.get('/authority/'+state.pagination.currentPage+"/"+state.pagination.pageSize+param).then(res=>{
    state.pagination.total = res.data.total;
    state.dataList = res.data.list;
  })
}

//切换页码
const handleCurrentChange=(currentPage)=> {
  //修改页码值为当前选中的页码值
  state.pagination.currentPage = currentPage;
  //执行查询
  load();
}

const handleSizeChange=(pageSize)=>{
  state.pagination.pageSize = pageSize;
  load();
}

//添加窗口弹出
const   handleCreate=()=> {
  state.dialogFormVisible = true;
  resetForm();
}

const resetForm=()=> {
  state.formData={};
}

const cancel=()=>{
  state.dialogFormVisible = false;
  state.dialogFormVisible4Edit = false;
  ElMessage({type: 'info', message: '操作取消',})
}

//添加
const handleAdd=()=> {
  instance.post("/authority",state.formData).then((res)=>{
    if (state.formData.authorityName==null || state.formData.authorityName==""){
      ElMessage({type: 'error', message: '权限名称不能为空',})
    }else if (state.formData.features==null || state.formData.features==""){
      ElMessage({type: 'error', message: '权限功能不能为空',})
    }
//如果操作成功，关闭弹层，显示数据
    if(res.flag){
      state.dialogFormVisible = false;
      ElMessage({type: 'success', message: '添加成功',})
    }else {
      ElMessage({type: 'error', message: '添加失败',})
    }
  }).finally(()=>{
    load()
  });
}

//弹出修改窗口
const  handleEidt=(row)=> {
  instance.get("/authority/"+row.id).then(res=>{
    if(res.flag){
//展示弹层，加载数据
      state.formData=res.data
      state.dialogFormVisible4Edit = true;
    } else{
      ElMessage({type: 'error', message: '修改页面弹出失败',})
    }
  })
}


  const handleUpdate=()=>{
    instance.put("/authority",state.formData).then((res)=>{
      if (state.formData.authorityName==null || state.formData.authorityName==""){
        ElMessage({type: 'error', message: '权限名称不能为空',})
      }else if (state.formData.features==null || state.formData.features==""){
        ElMessage({type: 'error', message: '权限功能不能为空',})
      }
//如果操作成功，关闭弹层，显示数据
      if(res.flag){
        state.dialogFormVisible4Edit = false;
        ElMessage({type: 'success', message: '修改成功',})
      }else {
        ElMessage({type: 'error', message: '修改失败',})
      }
    }).finally(()=>{
      load();
    });
}

const handleDelete=(row)=> {
  ElMessageBox.confirm('是否删除权限?', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning',
      }
  ).then(() => {
    instance.delete("/authority/"+row.id).then((res)=>{
      if(res.flag){
        ElMessage({type: 'success', message: '删除成功',})
      }else{
        ElMessage({type: 'error', message: '删除失败',})
      }
    }).finally(()=>{
      load()
    });
  }).catch(()=>{
    ElMessage({type: 'info', message: '已取消删除',})
  });
}

load()

</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.filter-container .el-form-item {
  margin-right: 10px;
}

.filter-container .butT {
  margin-left: 10px;
}
</style>